<template>
    <div class="login-box">
        <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules" 
    label-width="80px"
    class="demo-ruleForm"
  >
  <h2>后台管理系统</h2>
    <el-form-item label="账号" prop="username">
      <el-input v-model="ruleForm.username" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="ruleForm.password"
        type="password"
        autocomplete="off"
      />
      </el-form-item>
    <el-form-item>
      <el-button class="loginBtn" type="primary" @click="submitForm(ruleFormRef)"
        >登录</el-button>
      <el-button class="loginBtn" @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
    </div>
</template>

<script lang="ts">
import { FormInstance } from 'element-plus'
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { LoginData } from '../type/login'
import { login } from '../request/api'

export default defineComponent({
    setup () {
        const rules={
            username:[
                {required:true,message:"请输入账号",trigger:"blur"},
                    {min:3,max:10,message:"请输入3-10个字符",trigger:"blur"}
            ],
            password:[
                {required:true,message:"请输入账号",trigger:"blur"},
                    {min:3,max:10,message:"请输入3-10个字符",trigger:"blur"}
            ]
        }
        //登录
        const data=reactive(new LoginData());
        const ruleFormRef=ref<FormInstance>();
        const router=useRouter();
        const submitForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return;
              // 对表单的内容进行验证
              // vaild布尔类型，为true表示验证成功，反之失败 
                formEl.validate((valid) => {
              if (valid) {
                login(data.ruleForm).then((res)=>{
                  console.log(res);
                  //验证密码是否正确
                  if(res.data.success==true){
                    // 将token进行保存
                  localStorage.setItem('token',res.data.token);
                  // 跳转页面=>首页
                  router.push('/');
                  }else{
                    console.log('error submit!')
                    return false 
                  }
                   
                })
                // console.log('submit!')
              } else {
                console.log('error submit!')
                 return false
                }
              })
            };
        const resetForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return
            formEl.resetFields()
        }
        return {...toRefs(data),rules,submitForm,ruleFormRef,resetForm}
    }
})
</script>

<style scoped>
.login-box{
    width: 100%;
    height: 100%;
    background: url(../assets/bg2.jpg);
    padding:10px;
    text-align: center;
}
.demo-ruleForm{
    width: 500px;
    margin: 200px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
}
.loginBtn{
    width: 48%;
}
h2{
    margin-bottom: 15px;
}
</style>